import React, { useState, useCallback } from "react";
import { Typography } from "@mui/material";
import ManageSearchIcon from "@mui/icons-material/ManageSearch";
import { RowFlexBoxCC } from "../common/Common";
import AdvancedSearchDialog from "./AdvancedSearchDialog";

/**
 * 高级搜索按钮
 * @param {*} param0
 * @returns
 */
export default function AdvancedSearchButton({
  setSearchData
}) {
  //Dialog的状态
  const [openAdvancedSearchDialog, setOpenAdvancedSearchDialog] =
    useState(false);

  //处理 Dialog的打开和关闭
  const handleAdvancedSearchDialog = useCallback(() => {
    setOpenAdvancedSearchDialog(true);
  }, []);
  const handleCloseAdvancedSearchDialog = useCallback(() => {
    setOpenAdvancedSearchDialog(false);
  }, []);
  
  return (
    <div>
      <RowFlexBoxCC
        sx={{
          pl: "10px",
          color: (theme) => theme.palette.text.main,
          "&:hover": {
            color: (theme) => theme.palette.hover.secondary,
          },
        }}
        onClick={handleAdvancedSearchDialog}>
        <ManageSearchIcon />
        <Typography variant="body1" sx={{ cursor: "pointer" }}>
          高级搜索
        </Typography>
      </RowFlexBoxCC>
      <div>
        {/*高级搜索的对话框 */}
        <AdvancedSearchDialog
          openAdvancedSearchDialog={openAdvancedSearchDialog}
          setOpenAdvancedSearchDialog={setOpenAdvancedSearchDialog}
          handleCloseAdvancedSearchDialog={handleCloseAdvancedSearchDialog}
          setSearchData={setSearchData}
        />
      </div>
    </div>
  );
}
